<div class="table-responsive">
    <table class="table table-bordered table-hover table-grid dataTable">
        <thead>
        <tr>
            <th width="40" class="hidden-480"> </th>
            <th
                class="th-{{f.field}}"
                ng-bind-html="f.displayName"
                ng-class="{sortable: f.sortAble||f.field=='id', sorting_asc:sorting==f.field+' DESC',sorting_desc:sorting==f.field+' ASC', 'hidden-480': hiddenWhen480px.indexOf(f.field)>=0||f.hiddenWhen480}"
                ng-repeat="f in config.columnDefs"
                ng-click="doGridSortBy(f.field)"></th>
        </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in itemsList"
                ng-dblclick="doGridDblClick(item, null, $event)"
                ng-click="doGridClick($index, $event)"
                ng-touch="doAlert($event,item,config)"
                ng-right-click="doContextMenu($event,item,config)">
                <td align="center" class="hidden-480">
                    <label>
                        <input type="checkbox" class="ace" ng-change="recordSelected(result)" ng-true-value="{{$index+1}}" ng-false-value="{{-($index+1)}}" ng-model="result" />
                        <span class="lbl"></span>
                    </label>
                </td>
                <td ng-repeat="field in config.columnDefs"
                    class="td-{{field.field}}"
                    ng-bind-html="item[field.field]|tryGridEval:$parent.$index:field.field|tryGridFilter:field.cellFilter:$parent.$index"
                    ng-class="{'hidden-480': hiddenWhen480px.indexOf(field.field)>=0||field.hiddenWhen480}"></td>
            </tr>
            <tr ng-show="itemsList.length<1">
                <td colspan="{{config.columnDefs.length+3}}" class="td-unfound" align="center" ng-bind="'lang.messages.nodata'|lang"></td>
            </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="{{config.columnDefs.length+2}}" valign="middle">
                <div class="row">
                    <div class="col-sm-4">
                        {{'totalServerItem'|lang}} {{totalServerItems}}<br />
                        {{'paginationInfo'|lang}} {{pagingOptions.currentPage}}/{{totalPages}}
                    </div>
                    <div class="col-sm-8 text-right">
                        <select class="actionsBtnRight" ng-options="p for p in pageSizes" ng-model="pagingOptions.pageSize"></select>
                        <div class="dataTables_paginate paging_bootstrap">
                            <ul class="pagination">
                                <li class="prev" ng-click="setPage(1)">
                                    <a href=""><i class="icon-angle-double-left"></i></a>
                                </li>
                                <li ng-click="setPage('-1')"><a href=""><i class="icon-angle-left"></i></a></li>
                                <li><input type="number" class="input-mini pagingInput" ng-model-options="{ debounce: 500 }" ng-model="pagingOptions.currentPage" min="1" max="{{totalPages}}" /></li>
                                <li ng-click="setPage('+1')"><a href=""><i class="icon-angle-right"></i></a></li>
                                <li class="next" ng-click="setPage('max')">
                                    <a href=""><i class="icon-angle-double-right"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        </tfoot>
    </table>
</div>